import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { get } from 'lodash'
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
} from 'recharts'
import { Loading, Columns, Column } from '@kube-design/components'
import { Card } from 'components/Base'

import { getLastMonitoringData } from 'utils/monitoring'

import ClusterMonitorStore from 'stores/monitoring/cluster'

import ResourceItem from './ResourceItem'
import PieCard from './PieCard'
import styles from './index.scss'

const MetricTypes = {
  cpu_usage: 'cluster_cpu_usage',
  cpu_total: 'cluster_cpu_total',
  memory_usage: 'cluster_memory_usage_wo_cache',
  memory_total: 'cluster_memory_total',
  disk_size_usage: 'cluster_disk_size_usage',
  disk_size_capacity: 'cluster_disk_size_capacity',
  pod_count: 'cluster_pod_running_count',
  pod_capacity: 'cluster_pod_quota',
}

@observer
export default class ResourcesUsage extends Component {
  monitorStore = new ClusterMonitorStore({ cluster: this.props.cluster })

  constructor(props) {
    super(props)
    this.state = {}
  }

  componentDidMount() {
    this.fetchData()
  }

  get metrics() {
    return this.monitorStore.data
  }

  getValue = data => get(data, 'value[1]', 0)

  fetchData = () => {
    this.monitorStore.fetchMetrics({
      metrics: Object.values(MetricTypes),
      last: true,
    })
  }

  getResourceOptions = () => {
    const data = getLastMonitoringData(this.metrics)
    return [
      {
        name: '飞腾',
        unitType: 'cpu',
        used: this.getValue(data[MetricTypes.cpu_usage]),
        total: this.getValue(data[MetricTypes.cpu_total]),
      },
      {
        name: '龙芯',
        unitType: 'memory',
        used: this.getValue(data[MetricTypes.memory_usage]),
        total: this.getValue(data[MetricTypes.memory_total]),
      },
      {
        name: '申威',
        unitType: '',
        used: this.getValue(data[MetricTypes.pod_count]),
        total: this.getValue(data[MetricTypes.pod_capacity]),
      },
      // {
      //   name: t('DISK'),
      //   unitType: 'disk',
      //   used: this.getValue(data[MetricTypes.disk_size_usage]),
      //   total: this.getValue(data[MetricTypes.disk_size_capacity]),
      // },
    ]
    // return [
    //   {
    //     name: '飞腾',
    //     unitType: 'cpu',
    //     used: this.getValue(data[MetricTypes.cpu_usage]),
    //     total: this.getValue(data[MetricTypes.cpu_total]),
    //   },
    //   {
    //     name: '龙芯',
    //     unitType: 'memory',
    //     used: this.getValue(data[MetricTypes.memory_usage]),
    //     total: this.getValue(data[MetricTypes.memory_total]),
    //   },
    //   {
    //     name: '申威',
    //     unitType: '',
    //     used: this.getValue(data[MetricTypes.pod_count]),
    //     total: this.getValue(data[MetricTypes.pod_capacity]),
    //   },
    // ]
  }

  getRadarOptions = options =>
    options.map(option => ({
      name: option.name,
      usage: Math.round((option.used * 100) / (option.total || option.used)),
    }))

  render() {
    const options = this.getResourceOptions()
    const radarOptions = this.getRadarOptions(options)
    return (
      <Card className={styles.storageBox}>
        <Loading spinning={this.monitorStore.isLoading}>
          <Columns>
            <Column className="is-narrow is-4">
              <Card
                className={styles.storageCondition}
                title="内存/存储使用情况"
              >
                <PieCard
                  title={'内存 GB'}
                  used={options[1].used}
                  total={options[1].total}
                />
                <PieCard
                  title={'存储 GB'}
                  used={options[2].used}
                  total={options[2].total}
                />
              </Card>
            </Column>
            <Column className="is-narrow is-8">
              <Card className={styles.storageCondition} title="CPU使用情况">
                <div className={styles.wrapper}>
                  <div className={styles.chart}>
                    <RadarChart
                      cx={110}
                      cy={108}
                      width={230}
                      height={206}
                      data={radarOptions}
                    >
                      <PolarGrid gridType="circle" />
                      <PolarAngleAxis dataKey="name" />
                      <PolarRadiusAxis domain={[0, 100]} />
                      <Radar
                        dataKey="usage"
                        stroke="#eeeeee"
                        fill="#1c2d4267"
                      />
                    </RadarChart>
                  </div>
                  <div className={styles.list}>
                    <PieCard
                      title={'CPU Core'}
                      used={options[0].used}
                      total={options[0].total}
                    />
                    {options.map(option => (
                      <ResourceItem key={option.name} {...option} />
                    ))}
                  </div>
                </div>
              </Card>
            </Column>
          </Columns>
        </Loading>
      </Card>
    )
  }
}
